<template>
  <el-col :lg="6" :sm="12" :xs="12">
    <div class="farm2-block-box">
      <el-progress type="dashboard" :percentage="props.persent" :color="[{ color: colorval, percentage: 20 }]">
        <template #default="{}">
          <div class="percentage-value" style="font-size: 18px;">{{ props.title1 }}</div>
          <div class="percentage-label" style="font-size: 12px;">{{ props.title2 }}</div>
          <div v-if="props.title2" class="percentage-label" style="font-size: 12px;">{{ props.title3 }}</div>
        </template>
      </el-progress>
    </div>
  </el-col>
</template>
<script setup lang="ts">
import { computed } from 'vue';



const props = defineProps({
  colorType: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  persent: {
    type: Number,
    required: true
  },
  title1: {
    type: String,
    required: true
  },
  title2: {
    type: String,
    required: false
  },
  title3: {
    type: String,
    required: false
  },
})

const colorval = computed(() => {
  if (props.colorType == "purple") {
    return "#9694ff";
  }
  if (props.colorType == "blue") {
    return "#57caeb";
  }
  if (props.colorType == "green") {
    return "#5ddab4";
  }
  if (props.colorType == "red") {
    return "#ff7976";
  }
  return '';
});



</script>
<style scoped>
.farm2-block-box {
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
  border-radius: 1em;
  margin-left: 20px;
  margin-bottom: 20px;
  height: 150px;
}

.percentage-value {
  padding-top: 10px;
}

.percentage-label {
  padding-top: 10px;
}
</style>
